<template>
    <div class="block-padding">
      <div class="title-wrap" v-if="song_list && song_list.length">
         <h3 class="title">{{title}}</h3>
        <router-link class="txt-more" tag="span" :to="{name:'MoreList',params:{type:type,title:title}}">更多&nbsp;></router-link>
      </div>
      <div class="block-content">
        <div class="content" v-for="(song,index) in song_list" :key="index">
          <router-link :to="{name:'musicPlay',params:{songId:song.song_id}}">
            <img :src="song.pic_big" :alt="song.title">
            <p>{{song.title}}</p>
          </router-link>
        </div>


      </div>
    </div>
</template>

<script>
    export default {
        name: "TodayCommend",
         props:{
           title:{
             type:String,
             default:''
           },
           type:{
             type:Number,
             default:1
           }
         },
        data() {
          return {
            song_list:[],
          }
        },
       mounted(){
          //'/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=6&offset=1'
          let url = this.host + `/v1/restserver/ting?method=baidu.ting.billboard.billList&type=${this.type}&size=6&offset=1`
          this.$axios.get(url).then(res=>{
             let {song_list} = res.data;
              this.song_list = song_list;

          }).catch(e=>{
             console.log(e)
          })
       }
    }
</script>

<style scoped lang="less">
 .block-padding{
   padding: 20px 17px 10px;
   background-color: #fff;
   margin-bottom: 10px;
   .title-wrap{
     display: flex;
     justify-content: space-between;
     h3{
       font-size: 18px;
       font-weight: 700;
       color: #2b2b2b;
     }
     span{
       font-size: 14px;
       position: relative;
       top: 2px;
       color: #2b2b2b;
     }
   }
   .block-content{
     display: flex;
     flex-wrap: wrap;
     margin-top: 15px;
     .content:nth-of-type(3n){
       margin-right: 0px;
     }
     .content{
       width: 30.3%;
       flex: 0 0 30.3%;
       margin-right: 13px;
       margin-bottom: 11px;
      a{
        font-size: 14px;
        color: #333;

        img{
          width: 100%;
        }
        p{
          line-height: 22px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }

     }
   }

 }
</style>
